<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglib.inc" %>
<%@ include file="/WEB-INF/inc/script.inc" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<base href="${base}">
    <title>中金通 | 相关文件</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

	<!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">

</head>

<body>

    <div id="wrapper">

    	<!-- 左侧菜单 -->
        <jsp:include page="/WEB-INF/jsp/common/main-menu.jsp"></jsp:include>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <!-- 头部工具栏区 -->
        <jsp:include page="/WEB-INF/jsp/common/main-header.jsp"></jsp:include>
        </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>产品管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="common/platform">Home</a>
                        </li>
                        <li>
                            <a href="product/list">产品管理</a>
                        </li>
                        <li>
                         <a href="product/list">产品列表</a>
                        </li>
                        <li>
                            <a href="product/detail/${product.id}">${product.briefName}</a>
                        </li>
                        <li class="active">
                            <strong>相关文件</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
		
		<div class="row" style="margin-top:10px;">
			<div class="col-md-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li>
								<a href="product/list">
									 产品列表
								</a>
							</li>
							<li>
								<a href="product/add">
								 	新增产品
								</a>
							</li>
							<li class="active">
								<a>
									 相关文件
								</a>
							</li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="panel-body">
                                 <div class="wrapper wrapper-content animated fadeInRight ecommerce">
                                  
							         <div class="form-horizontal">
							           <!--Detail form start-->
										  <div class="row" style="padding-left:17px">
										    <div class="col-sm-4">
										        <div class="form-group">
										            <label class="col-sm-2 control-label">相关文件</label>
										             <div id="relatedFileId" class="col-sm-10">
										        		<c:forEach items="${relatedFile}" var="file">
										       			    <div style="padding-top:2px;" id="${file.id}">
										        			    ${file.fileName}
										        			    <button onclick="deleteFile(this)" style="border:0px;background:#0f0;background-color:transparent;" title="删除">
																    <span aria-hidden="true">&times;</span>
																    <span class="hide">Close</span>
																</button>
																<button id="${file.id}" name="${file.fileName}" type="button" class="btn btn-outline btn-primary btn-xs" onclick="showRenameDialog(this)">重命名</button>
																	 
										        			</div>
															<%-- <input readonly style="border:0px"  type="text" class="form-control" value="${file.fileName}"><br> --%>
														</c:forEach>
										            </div>
										        </div>
										    </div> 
										  </div>
									 </div>                   
							         <form method="post" id="uploadRelatedFile" action="productAttachment/uploadRelatedFile" enctype="multipart/form-data" class="form-horizontal">
							             <div class="row" style="padding-left:17px">
										   <div class="col-sm-4">
										      <div class="form-group">
										          <label class="col-sm-2 control-label">上传文件</label>
										           <div class="col-sm-6">
										          		<input id="file" class="btn btn-outline btn-primary" type="file" name="file" accept=".xls,.xlsx,.doc,.docx,.txt,.pdf,.ppt,.pptx">
										          		<input id="productId" style="display: none" type="text" name="productId" value="${product.id}"> 
										          			<div  style="padding-top:2px"><input class="btn btn-outline btn-primary" type="submit" value="上传"></div>
										              	</div>
										          	</div>
										      	</div> 
										 		</div>  
									</form>
						                        
						     
						           
						           <!-- update model start -->
									<div class="modal inmodal fade" id="updateModel" tabindex="-1" role="dialog"  aria-hidden="true">
		                                <div class="modal-dialog modal-lg">
		                                    <div class="modal-content">
		                                        <div class="modal-header">
		                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		                                            <h4 class="modal-title">重命名</h4>
		                                        </div>
		                                        <div class="modal-body">
		                                        <div id="updateBody"></div>
		                                        <div class="form-horizontal">
		                                			<div class="form-group"><label class="col-sm-2 control-label">文件原名</label>
		                                    			<div class="col-sm-8"><input readonly style="border:0px;background:#0f0;background-color:transparent;" type="text" id="o_renameFileName" class="form-control" >
		                                				</div>
		                                			</div>
		                                			<div class="form-group"><label class="col-sm-2 control-label"><font color="red">*&nbsp;&nbsp;</font>文件新名</label>
		                                    			<div class="col-sm-8"><input type="text" id="renameFileName" class="form-control" >
		                                            	</div>
		                                			</div>
		                                			<span id="renameInfo" class="col-sm-2 control-label"></span>
		                                       </div>
													
		                                        </div>
		                                        <div class="modal-footer">
		                                            <button type="button" class="btn btn-white" data-dismiss="modal">取 消</button>
		                                            <button type="button" id="saveModel" class="btn btn-primary" onclick="renameFile()">保 存</button>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <!-- update model end --> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
		</div>
		</div>
        <!-- 底部版权 -->
        <jsp:include page="/WEB-INF/jsp/common/main-footer.jsp"></jsp:include>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>
	<script src="js/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>
	<script src="js/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
    <!-- Data picker -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="js/plugins/dataTables/dataTables.responsive.js"></script>
    <script src="js/plugins/dataTables/dataTables.tableTools.min.js"></script>
    
    <!-- 业务 -->
    <script src="js/ajaxfileupload.js"></script>
    
     <script src="js/jquery.form.js"></script>
     <script src="js/product/FormatUtils.js"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
			
        });
        
        $('#uploadRelatedFile').ajaxForm({  
            dataType: 'json',  
            success: function(data){  
                if(data.code==0){
                	bootbox.alert(data.message);
                }else if(data.code==1){
                	//getRelatedFile();
                	bootbox.dialog({
    					message : "上传成功！ ",
    					title : "温馨提示：",
    					buttons : {
    						main : {
    							label : "确定",
    							className : "btn btn-outline btn-primary",
    							callback : function() {
    									window.location.reload();
    							}
    						}
    					}
    				});
                }
            }  
        });  
        
        
        function deleteFile(obj){
            bootbox.confirm("您确定要删除这个文件?", function(result) {
                if (result) {
                	var nRow = $(obj).parents('div')[0];
                    var id = nRow.id;
                    
                    $.ajax({
                    	type:"get",
                        url: ctx + "/productAttachment/delete",
                        data:"id=" + id,
                        dataType:"json",
                        success: function(msg){
                        	if (msg.code == 1) {
                        		getRelatedFile();
                        		bootbox.alert("删除文件成功！");
                        	} else {
                        		bootbox.alert("删除文件失败！");
                        	}
                        },
                        error: function (msg) {
                        	bootbox.alert(msg.message);
                        }
                    });
                }
            });
        }
        
        function getRelatedFile(){
        	$.ajax({
            	type:"get",
                url: ctx + "/productAttachment/query/${product.id}",
                dataType:"json",
                success: function(data){
                	if (data.code == 1) {
                		var objs = data.data.relatedFile;
                    	var html = "";
                    	var closeBttn = '<button onclick="deleteFile(this)" style="border:0px;background:#0f0;background-color:transparent;" title="Close">'+
    						            '<span aria-hidden="true">&times;</span>'+
    							        '<span class="hide">Close</span>'+
    					                '</button>';
    					
                    	for(var i=0;i<objs.length;i++){
                    		var id = objs[i].id;
                    		var fileName = objs[i].fileName;
                    		var renameBttn = '<button id="'+id+'" name="'+fileName+'" type="button" class="btn btn-outline btn-primary btn-xs" onclick="showRenameDialog(this)">重命名</button>';
                    		html+="<div style='padding-top:2px' id='"+id+"'>"+fileName+closeBttn+renameBttn+"</div>";
                    	}
                    	$("#relatedFileId").html(html);
                	}
                },
                error: function (msg) {
                	bootbox.alert(msg.message);
                }
            });
        }
        var modal;
        function showRenameDialog(obj){
        	var filename = $(obj).attr('name').split(".")[0];
        	$("#o_renameFileName").val(filename);
        	$("#renameFileName").val(filename);
        	$("#renameFileName").attr('name',$(obj).attr('id'));
        	modal = $('#updateModel').modal('show');
        }
        
        function renameFile(){
        	var o_filename = $("#o_renameFileName").val();
        	var filename = $("#renameFileName").val();
        	if(o_filename==filename){
        		bootbox.alert("请输入与原文件名不同的名字！");
        		return;
        	}
        	
            var id = $("#renameFileName").attr('name');

        	$.ajax({
            	type:"post",
                url: ctx + "/productAttachment/rename",
                data:"id=" + id+"&fileName="+filename,
                dataType:"json",
                success: function(data){
                	if (data.code == 1) {
                		modal.modal('hide');
                		bootbox.alert("更新文件名字成功！");
                		getRelatedFile();
                	}
                },
                error: function (msg) {
                	bootbox.alert(msg.message);
                }
            });
        }
    </script>

</body>
</html>